<template>
  <div class="trainDetails2">
    <div class="container">
      <div class="train-detalis-left">
        <div class="train-detalis-left-top">
          <li
            class="el-icon-monitor"
            style="
              margin-top: 18px;
              margin-left: 20px;
              color: rgb(64, 158, 255);
              font-size: 28px;
              font-weight: bold;
            "
          >
            {{ trainInfo.trainClassTitle }}
          </li>
        </div>
        <div class="train-detalis-left-bottom">
          <div class="player-container">
            <video-player
              class="vjs-custom-skin"
              :options="playerOptions"
              @play="onPlayerPlay($event)"
              @pause="onPlayerPause($event)"
              @ended="onPlayerEnded($event)"
              @timeupdate="onPlayerTimeupdate($event)"
              @ready="playerReadied"
            ></video-player>
          </div>
        </div>
      </div>
      <!-- 培训详情页2 右侧课程栏 -->
      <div class="train-detalis-right">
        <div class="train-detalis-right-bottom">
          <el-table
            :data="tableData"
            style="width: 100%"
            @row-click="handle"
            :header-cell-style="{
              background: '',
              color: 'rgb(64, 158, 255)',
              fontSize: '16px',
              height: '70px',
            }"
          >
            <el-table-column
              prop="trainClassTitle"
              width="150"
              label="课程名称"
              style="font-weight: 50px"
            >
              <template slot-scope="scope">
                <i class="el-icon-caret-right"></i>
                {{ scope.row.trainClassTitle }}
              </template>
            </el-table-column>
            <el-table-column prop="trainStatus" width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.trainStatus == '1'">
                  <i
                    style="color: rgb(103, 194, 58); font-size: 22px"
                    class="el-icon-success"
                  ></i>
                </div>
                <div v-if="scope.row.trainStatus == '0'">
                  <i style="font-size: 22px" class="el-icon-s-flag"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "vue-video-player/src/custom-theme.css";
import "video.js/dist/video-js.css";
import { findOutlineInfo } from "@/api/item";
import { openClassVideo } from "@/api/item";
import { recordVideoProgress } from "@/api/item";
import { updateItemSchedule } from "@/api/item";

export default {
  data() {
    return {
      paused: true,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        controls: true, //控制条
        preload: "auto", //视频预加载
        muted: false, //默认情况下将会消除任何音频。
        loop: false, //导致视频一结束就重新开始。
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "", //你所放置的视频的地址，最好是放在服务器上
          },
        ],
        // poster: "http://39.106.117.192:8080/static/indexImg.png", //你的封面地址（覆盖在视频上面的图片）
        width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      //userId、itemId和catalog的值是上一个页面传进来
      // catalogInfo: {
      //   userId: 1,
      //   itemId: 1,
      //   catalog: "目录一",
      //   durations:"",
      //   trainClassTitle:"",
      //   trainStatus:""
      // },

      trainInfo: {
        userId: 1,
        itemId: 1,
        catalog: "目录一",
        durations: 0,
        trainClassTitle: "",
        trainStatus: "",
      },

      tableData: [],
      timer: "",
      videoEnd: false
    };
  },

  created() {
    this.trainInfo.userId = this.$route.query.userId;
    this.trainInfo.itemId = this.$route.query.itemId;
    this.trainInfo.catalog = this.$route.query.catalog;

    this.getData();
  },
  //每3秒记录一次
  mounted() {
    this.timer = setInterval(this.putLearningObj, 3000);
  },
  destroyed() {
    // 如果定时器在运行则关闭
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getData() {
      findOutlineInfo(this.trainInfo).then((res) => {
        //播放第一个视频
        this.playerOptions["sources"][0]["src"] = res.data[0].trainClassFile;
        this.trainInfo.trainClassTitle = res.data[0].trainClassTitle;
        this.tableData = res.data;
        this.trainInfo.trainStatus = res.data[0].trainStatus;
        this.trainInfo.durations = res.data[0].trainSchedele;
      });
    },
    handle(row) {
      //记录初始进度
      this.trainInfo.trainStatus = row.trainStatus;
      this.trainInfo.durations = row.trainSchedele;

      openClassVideo(row).then((res) => {
        console.log(row);
        this.playerOptions["sources"][0]["src"] = res.data;
        this.trainInfo.trainClassTitle = row.trainClassTitle;
      });

    
    },
    //记录视频进度
    putLearningObj() {
      if (!this.paused) {
        console.log(this.trainInfo);
        //后端
        recordVideoProgress(this.trainInfo).then((res) => {
          console.log(res);
        });
      }
      if(this.videoEnd == true){
        updateItemSchedule(this.trainInfo).then((res)=>{
          console.log(res)
          this.videoEnd = false;
        })
      }
    },
    onPlayerPlay(player) {
      this.paused = false;
    },
    onPlayerPause(player) {
      this.paused = true;
    },
    onPlayerEnded(player) {
      //记录视频结束
      this.paused = false;
      //视频放完改变完成进度
      this.trainInfo.trainStatus = 1;
      this.videoEnd = true;
    },
    onPlayerTimeupdate(player) {
      this.trainInfo.durations = Math.floor(player.cache_.currentTime * 1000);
    },
    playerReadied(player) {
      console.log(this.trainInfo.durations);
      player.currentTime(this.trainInfo.durations / 1000);
    },
  },
};
</script>

<style scoped>
.trainDetails2 {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  width: 85%;
  height: 90%;
  display: flex;
}
.train-detalis-left {
  height: 100%;
  /* background-color: rgb(255, 255, 255); */
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  width: 800px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.train-detalis-left-top {
  height: 10%;
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.train-detalis-left-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  height: 80%;
  width: 100%;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 25px;
  border-radius: 4px;
}
.train-detalis-right {
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 300px;
  margin-left: 20px;
  margin-top: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.train-detalis-right-top {
  height: 10%;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  color: rgb(64, 158, 255);
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
.train-detalis-right-top > div:first-child {
  margin-top: 24px;
  margin-left: 20px;
}
.train-detalis-right-bottom {
  height: 80%;
  width: 100%;
  /* background-color: rgb(240, 242, 245); */
  /* margin-top: 0px; */
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
.icon {
  width: 100%;
  height: 80%;
}
.train-detalis-right-bottom-class {
  margin-left: 20px;
  margin-top: 20px;
  font-weight: 550;
  color: green;
}
.train-detalis-right-bottom-schedule {
  margin-right: 20px;
  margin-top: 20px;
}
div >>> .el-table .el-table__body .el-table_1_column_1 .cell {
  padding-left: 28px;
  font-size: 18px;
  font-weight: 600;
}
div >>> .el-table .el-table__body .el-table_1_column_2 .cell {
  padding-left: 75px;
  font-weight: 600;
}
</style>